<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <!-- slider -->
        <script src="js/jquery.glide.js"></script> <!-- slider -->
        <!-- Menu -> função pra deixar o menu ativo (não funcionou porque a faixa pra ficar do jeito certo tem que ter 
        position: absolute, o que faz com que o menu selecionado flutue) -->
        <script type="text/javascript">
        $(document).ready(function(){
            $("ul.menu li:first").addClass("active").show();
            $("ul.menu li ").click(function () {
                $("ul.menu li").removeClass("active")
                $(this).addClass("active")
                $(activeTab).fadeIn("slow");
                return false;
                                    });
         
        });
        </script>
        <!-- fancybox -->
        <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script>
        <link rel="stylesheet" href="css/jquery.fancybox.css">
        <script type="text/javascript">
            $(document).ready(function() {
                $('.fancybox').fancybox();
            });
        </script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">Você está usando um browser <strong>ultrapassado</strong>. Por favor <a href="http://browsehappy.com/">atualize seu browser</a> para melhorar sua navegação.</p>
        <![endif]-->

        <header>
        	<div id="topo" class="container">
        		<a href="#"><img class="logo" src="img/logo.png" /></a>
        		<div id="menu-ajuda">
        			<a class="fancybox fancybox.iframe" href="busca.html"><div id="busca-p"></div></a>
        			<div id="busca">
        				<form>
                            <span>
                                <input class="buscar-txt" type="search" name="s" placeholder="O que você procura?">
                                <input class="buscar-btn" type="submit" value="">
                            </span>
                        </form>
        			</div>
        			
                    <div id="contato-duvidas">
            			<a href="#">
            				<div id="contato">
    	        				<span><img src="img/contato.png" alt="fale conosco"> fale conosco</span>
    	        			</div>
    	        		</a>
            			<a href="#">
            				<div id="duvidas">
            					<span><img src="img/duvidas.png" alt="dúvidas e sugestões" /> dúvidas e sugestões</span>
            				</div>
            			</a>
                    </div>
        		</div>
        	</div>
            <div id="banner-container">
            	<div class="banner slider">
                    <ul class="slides">
                        <li class="slide"><a href="#"><span class="banner-title">Bem-vindo à sua enciclopédia online sobre a Amazônia</span><img src="img/penas-arara.jpg"/></a></li>
                        <li class="slide"><a href="#"><span class="banner-title">This is a slide.</span><img src="http://placekitten.com/1280/420"/></a></li>
                        <li class="slide"><a href="#"><span class="banner-title">This is a slide.</span><img src="http://placekitten.com/1280/420"/></a></li>
                    </ul>
                </div>
            </div>
        </header>

        <div id="menu-mobile">
        	<p class="categoria-title">filtrar por Categoria:</p>
            <div class="select-estilo">
                <select>
                    <option>DESTAQUES</option>
                    <option>TODOS</option>
                    <option>Animais</option>
                    <option>Bibliotecas</option>
                    <option>Biodiversidade</option>
                    <option>Biografias</option>
                    <option>Cidades</option>
                    <option>Culinária</option>
                    <option>Cultura</option>
                    <option>Doenças Tropicais</option>
                    <option>Economia</option>
                    <option>Esportes da Amazônia</option>
                    <option>Estados</option>
                    <option>Folclore</option>
                    <option>Geografia</option>
                    <option>Hinos</option>
                    <option>Lendas</option>
                    <option>Lugares Históricos</option>
                    <option>Mapas e Bandeiras</option>
                    <option>Meio ambiente</option>
                    <option>Museus</option>
                    <option>Objetos</option>
                    <option>Países Amazônicos</option>
                    <option>Paques Nacionais</option>
                    <option>Peixes da Amazônia</option>
                    <option>Política</option>
                    <option>Reservas</option>
                    <option>Turismo</option>
                </select>
            </div>
        </div>

        <div id="superbanner" class="container"></div>

        <div class="container">

            <div id="menu">
                <nav>
                    <p class="categoria-title">filtrar por Categoria:</p>
                    <ul class="menu" id="nav">
                        <li><a href="#"><div class="faixa"></div><span class="current">DESTAQUES</span></a></li>
                        <li><a href="#"><div class="faixa"></div><span>Animais</span></a></li>
                        <li><a href="#"><div class="faixa"></div><span>Bibliotecas</span></a></li>
                        <li><a href="#"><div class="faixa"></div><span>Biodiversidade</span></a></li>
                        <li><a href="#"><div class="faixa"></div><span>Biografias</span></a></li>
                        <li><a href="#"><div class="faixa"></div><span>Cidades</span></a></li>
                        <li><a href="#"><span>Culinária</span></a></li>
                        <li><a href="#"><span>Cultura</span></a></li>
                        <li><a href="#"><span>Doenças Tropicais</span></a></li>
                        <li><a href="#"><span>Economia</span></a></li>
                        <li><a href="#"><span>Esportes da Amazônia</span></a></li>
                        <li><a href="#"><span>Estados</span></a></li>
                        <li><a href="#"><span>Folclore</span></a></li>
                        <li><a href="#"><span>Geografia</span></a></li>
                        <li><a href="#"><span>Hinos</span></a></li>
                        <li><a href="#"><span>Lendas</span></a></li>
                        <li><a href="#"><span>Lugares históricos</span></a></li>
                        <li><a href="#"><span>Mapas e Bandeiras</span></a></li>
                        <li><a href="#"><span>Meio ambiente</span></a></li>
                        <li><a href="#"><span>Museus</span></a></li>
                        <li><a href="#"><span>Objetos</span></a></li>
                        <li><a href="#"><span>Países Amazônicos***</span></a></li>
                        <li><a href="#"><span>Parques Nacionais</span></a></li>
                        <li><a href="#"><span>Peixes da Amazônia</span></a></li>
                        <li><a href="#"><span>Política***</span></a></li>
                        <li><a href="#"><span>Reservas</span></a></li>
                        <li class="last"><a href="#"><span>Turismo</span></a></li>
                    </ul>
                    <img class="grafismo-menu" src="img/grafismo-menu.png">
                </nav>
            </div>

            <div id="conteudo">

                <div id="destaques">
                	<div class="caminhorato">
                		<p class="categoria-title">
                			<a href="#">A-Z</a> &#62; destaques
                		</p>
                	</div>
                	<hr>
                	<div class="bloco-destaques">
                		<ul>
                			<li>
                				<figure>
                					<div>
                						<img class="foto-destaque" src="http://placekitten.com/420/420"/>
                					</div>
                					<figcaption>
                						<a href="#">
                							<div class="noticia-title">
                								<h3>Nome da notícia seis palavras máximo</h3>
                							</div>
                							<img class="ver-mais" src="img/mais.png"/>
                						</a>
                						<div class="compartilhar">
                                          <a href="#" class="symbol-fb"><span>facebook</span></a>
                                          <a href="#" class="symbol-p"><span>pinterest</span></a>
                                        </div>
                					</figcaption>
                				</figure>
                			</li>
                			<li>
                				<figure>
                					<div>
                						<img class="foto-destaque" src="http://placekitten.com/420/420"/>
                					</div>
                					<figcaption>
                						<a href="#">
                							<div class="noticia-title">
                								<h3>Nome do animal duas linhas máx</h3>
                							</div>
                							<img class="ver-mais" src="img/mais.png"/>
                						</a>
                						<div class="compartilhar">
                                          <a href="#" class="symbol-fb"><span>facebook</span></a>
                                          <a href="#" class="symbol-p"><span>pinterest</span></a>
                                        </div>
                					</figcaption>
                				</figure>
                			</li>
                			<li>
                				<figure>
                					<div>
                						<img class="foto-destaque" src="http://placekitten.com/420/420"/>
                					</div>
                					<figcaption>
                						<a href="#">
                							<div class="noticia-title">
                								<h3>Nome do animal duas linhas máx</h3>
                							</div>
                							<img class="ver-mais" src="img/mais.png"/>
                						</a>
                						<div class="compartilhar">
                                          <a href="#" class="symbol-fb"><span>facebook</span></a>
                                          <a href="#" class="symbol-p"><span>pinterest</span></a>
                                        </div>
                					</figcaption>
                				</figure>
                			</li>
                			<li>
                				<figure>
                					<div>
                						<img class="foto-destaque" src="http://placekitten.com/420/420"/>
                					</div>
                					<figcaption>
                						<a href="#">
                							<div class="noticia-title">
                								<h3>Nome do animal duas linhas máx</h3>
                							</div>
                							<img class="ver-mais" src="img/mais.png"/>
                						</a>
                                        <div class="compartilhar">
                                          <a href="#" class="symbol-fb"><span>facebook</span></a>
                                          <a href="#" class="symbol-p"><span>pinterest</span></a>
                                        </div>
                					</figcaption>
                				</figure>
                			</li>
                		</ul>
                	</div>
                </div>

                <div id="vejatambem">
                	<h2 class="bloco-title">&#187; Conheça também</h2>
                	<hr>
                    <ul>
                    	<li>
                    		<div class="vejatambem-img">
                                <a href="#">
                                    <span class="video">video</span>
                    			    <img src="http://placekitten.com/420/310">
                                </a>
                    		</div>
                    		<div class="retranca">
                    			<p>nome da seção</p>
                    		</div>
                    		<div class="vejatambem-title">
                    			<a href="#"><p>Nome da notícia ou vídeo - até 3 linhas no máximo</p></a>
                    		</div>
                    	</li>
                        <li>
                            <div class="vejatambem-img">
                                <a href="#"><img src="http://placekitten.com/420/310"></a>
                            </div>
                            <div class="retranca">
                                <p>nome da seção</p>
                            </div>
                            <div class="vejatambem-title">
                                <a href="#"><p>Nome da notícia ou vídeo - até 3 linhas no máximo</p></a>
                            </div>
                        </li>
                        <li>
                            <div class="vejatambem-img">
                                <a href="#">
                                    <span class="video">video</span>
                                    <img src="http://placekitten.com/420/310">
                                </a>
                            </div>
                            <div class="retranca">
                                <p>nome da seção</p>
                            </div>
                            <div class="vejatambem-title">
                                <a href="#"><p>Nome da notícia ou vídeo - até 3 linhas no máximo</p></a>
                            </div>
                        </li>
                        <li>
                            <div class="vejatambem-img">
                                <a href="#"><img src="http://placekitten.com/420/310"></a>
                            </div>
                            <div class="retranca">
                                <p>nome da seção</p>
                            </div>
                            <div class="vejatambem-title">
                                <a href="#"><p>Nome da notícia ou vídeo - até 3 linhas no máximo</p></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="publicidade" class="container"></div>

        <footer>
        </footer>

        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>-->
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script>
            var glide = $('.slider').glide({
                    afterTransition: function() {
                        var currentSlide = this.currentSlide;
                        console.log(currentSlide);
                    }
                }).data('api_glide');

                $(window).on('keyup', function (key) {
                    if (key.keyCode === 13) {
                        glide.jump(3, console.log('Wooo!'));
                    };
                });

                $('.slider-arrow').on('click', function() {
                    console.log(glide.current());
                });
        </script>
    </body>
</html>
